<template>
	<view class="content">
		<view class="age_content">
			<view class="survey_title">
				年龄阶段 <text>(多选)</text>
			</view>
			<view class="sub_box">
				<text :class="{'active':!isChoseAge()}" >不限</text>
				<text  
				v-for="(item,index) in ageList"
				:key="index" 
				:class="{'active':item.isClick}"
				@click="choseAgeType(index)"
				>{{item.categoryTitle}}</text>
				
			</view>
		</view>
		<view class="age_content">
			<view class="survey_title">
				机构类型 <text>(多选)</text>
			</view>
			<view class="sub_box">
				<text :class="{'active':!isChoseSubType()}">不限</text>
				<text
				 v-for="(item,index) in subTypeList"
				 :key="index" 
				 @click="choseType(index)"
				 :class="{'active':item.isClick}"
				 >{{item.categoryTitle}}</text>
				
			</view>
		</view>

		<view style="box-sizing: border-box;padding:0 30rpx;position: absolute;bottom: 58rpx;left: 0;right: 0;">
			<view class="pay_btn" @click="getSearchResult()">
				<text> 确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				list:[],
				ageList:[],//年龄选项
				subTypeList:[]
			}
		},
		onShow() {
			this.getData()
		},
		computed:{
			
		},
		methods:{
			isChoseAge(){
				let hasChose=this.ageList.some((a)=>{
					return a.isClick;
				})
				return hasChose;
			},
			isChoseSubType(){
				let hasChose=this.subTypeList.some((a)=>{
					return a.isClick;
				})
				return hasChose;
			},
			//获取搜索结果
			getSearchResult(){
				let ageList=this.ageList.filter((a)=>{
					return a.isClick
				})
				let subTypeList=this.subTypeList.filter((a)=>{
					return a.isClick
				})
				let arr=subTypeList.concat(ageList)
				this.$store.commit('setSearch', arr)
				uni.switchTab({
					 url: '../subject/index'
				});
			},
			choseType(index){
				if(this.subTypeList[index].isClick){
					this.subTypeList[index].isClick=false;
				}else{
					this.subTypeList[index].isClick=true;;
				}
				this.$forceUpdate()
			},
			//选择类型
			choseAgeType(index){
				if(this.ageList[index].isClick){
					this.ageList[index].isClick=false;
				}else{
					this.ageList[index].isClick=true;;
				}
				this.$forceUpdate()
			},
			//获取筛选数据
			getData(){
				this.$http.post('/api/mechanism/mchanismCategoryAll',{},'application/json').then((data)=>{
					if(data.data.code==200){
						this.list=data.data.result||[];
						if(this.list.length){
							this.ageList=this.list.filter((item)=>{
								return item.categoryType==2;
							})
							this.subTypeList=this.list.filter((item)=>{
								return item.categoryType==0;
							})
						}
					}else{
						uni.showToast({
							title: data.data.message,
							icon: "none",
							duration: 2000,
						
						});
					}
				}).catch((err)=>{
					uni.showToast({
						title: err.data.message,
						icon: "none",
						duration: 2000,
					
					});
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			// padding:40rpx 30rpx 0 30rpx;
	        background: #F0F0F0;
			position: relative;
			.age_content{
				width: 100%;
				background-color: #fff;
				box-sizing: border-box;
				padding:40rpx 32rpx;
				margin-bottom: 20rpx;
				.sub_box{
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
					margin-top: 35rpx;
					text.active{
						background: #EDF9EF;
						border-color:#4FC863;
						color: #4FC863;
					}
					text{
						box-sizing: border-box;
						width: 214rpx;
						height: 74rpx;
						border: 1px solid transparent;
						line-height: 74rpx;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						text-align: center;
						background: rgba(0, 0, 0, 0.05);
						border-radius: 6rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #333333;
						&:nth-child(3){
							margin:0;
						}
						&:nth-child(6){
							margin:0;
						}
					}
				}
			}
			.pay_btn{
				width: 100%;
				height: 88rpx;
				background: #4FC863;
				border-radius: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 46rpx;
				text{
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
					&:first-child{
						margin-right: 17rpx;
					}
				}
			}
			}
</style>
